<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body {
            display: flex;
            flex-direction: column-reverse;
            /*border: 1px solid #000;*/
        }
        
        main {
            margin: 50px;
            /*border: 1px solid #000;*/
            width: 500px;
            height: 200px;
        }
        /*cut-over-tab start  TODO*/
        .cut-over-tab {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .cut-over-tab ul {
            margin: 0;
            padding: 0;
            list-style: none;
            height: 40px;
            display: flex;
            line-height: 40px;
            border-bottom: 1px solid black;
        }
        .cut-over-tab ul li{
            flex: 1;
            text-align: center;
            background: #ccc;
            margin: 0 1px;
            cursor: pointer;
        }
        .cut-over-tab .cont .item {
            width: 400px;
            height: 259px;
            color: #fff;
            font-size: 50px;
            display: none;
        }

        .cut-over-tab .item:nth-child(1) {
            background: #199;
        }

        .cut-over-tab .item:nth-child(2) {
            background: #919;
        }

        .cut-over-tab .item:nth-child(3) {
            background: #991;
        }

        .cut-over-tab .item:nth-child(4) {
            background: #191;
        }

        .cut-over-tab .box ul li.active {
            background: red;
            color: #fff;
        }
        /*cut-over-tab end /


    </style>
</head>
<body>
    <main class="part01">
        <h2>内容操作</h2>
        <div class="box1">
            <em>文字</em>
        </div>
        <div class="box2">
            <b>文字</b>
        </div>
        <input type="text" name="" value="abc" id="" class="txt">

        <script title="内容操作">
            var box1 = document.querySelector(".box1");
            var box2 = document.querySelector(".box2");
            var txt = document.querySelector(".txt");

            console.log(typeof box1.innerHTML);
            console.log(box1.innerHTML);
            box1.innerHTML = "<mark>abc</mark>"

            console.log(typeof box2.innerText);
            console.log(box2.innerText);
            box2.innerText = "<mark>abc</mark>"

            console.log(typeof txt.value);
            console.log(txt.value);
            txt.value = "defffffffffffffffffffffffffff"
        </script>
    </main>

    <main class="part02">
        <h2>part2 元素节点操作</h2>
        <div class="part02">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <script>
            var p1 = document.createElement("p");
            console.log(p1);

            var part02 = document.querySelector(".part02");
            part02.appendChild(p1);
            p1.innerText = "p1"

            // p1.remove();
            // part02.remove();
            // part02.removeChild(p1);
            // console.log(part02.outerHTML);
            console.log(part02.innerHTML);

        </script>


    </main>

    <main style="border: 1px solid #000; width: 20%; height: 200px;
     display:flex; padding: 20px; flex-direction: column; align-items: flex-start; justify-content: space-between ">
        <!-- TODO 1. 聊天对话框 ️①鼠标点击发送 ②回车发送 或 ctrl+回车发送 -->
        <h3>聊天对话框</h3>
        <div class="chat-dialog">
            <div class="cont"></div>
            <div>
                <textarea class="txt"></textarea>
                <input type="button" class="btn" value="发送">
            </div>
        </div>

        <script>
            const text = document.querySelector(".chat-dialog .txt")
            const btn = document.querySelector(".btn");
            const cont = document.querySelector(".cont");
            btn.onclick = function () {
                if (text.value === "") return;
                const p = document.createElement("p");
                p.innerText = text.value;
                cont.appendChild(p);
                text.value = "";
            };
        </script>
    </main>

    <main class="progress-bar"
          style="border: 1px solid #000; width: 50%; height: 150px; display:flex; align-items: start;
          flex-direction: column;padding: 20px;
    ">

        <!-- TODO 2.进度条 -->
        <h2>进度条</h2>
        <div style="margin-bottom: 10px;">
            <input type="text" class ="delay" placeholder="输入速率" >
            <input type="button" value="开始" class="btn" >
        </div>

        <div class="progress-bar" style="width: 400px; height: 100px; border: 0px solid #000; position: relative;">
            <p style="height: 30px; position: absolute; left: 0; top: 0; margin: 0; background: blue; color:#ffffff;
            line-height: 30px; text-align: center;
        ">
                <span></span>
            </p>
        </div>

        <script>
            const pElement = document.querySelector(".progress-bar p");
            let spanElement = document.querySelector(".progress-bar span");
            let endValue = 400;
            const stepSize = 3;
            let time = null;

            let elementEvent = document.querySelector(".progress-bar .btn");


            function triggerEvent() {
                return function () {
                    // 可调速度
                    let delay = document.querySelector(".progress-bar .delay").value;
                    if (time !== null) return
                    time = createInterval(delay);
                };
            }

            // TODO：添加其他事件触发
            elementEvent.onclick = triggerEvent();

            function getHandler() {
                return function () {
                    if (endValue - pElement.offsetWidth < stepSize) {
                        clearInterval(time)
                        pElement.style.width = endValue + "px";
                        spanElement.innerHTML = "100%";
                    } else {
                        pElement.style.width = pElement.offsetWidth + stepSize + "px";
                        let number = pElement.offsetWidth / endValue * 100 + "";
                        spanElement.innerHTML = parseInt(number) + "%"
                    }
                };
            }

            function createInterval(delay) {
                return setInterval(getHandler(), delay);
            }

        </script>
    </main>

    <main>
        <h5>tips</h5>
        所有案例，所有的效果，都至少有两个逻辑组成 <br>
            程序逻辑：代码如何实现，代码思路 <br>
            业务逻辑：交互逻辑，是否符合用户操作行为 <br>
    </main>

    <!-- TODO 3.选项卡切换-->
    <main class="cut-over-tab">
        <ul>
            <li>办公系统</li>
            <li>教学系统</li>
            <li>工单系统</li>
            <li>招生系统</li>
        </ul>

        <div class="cont">
            <div class="item">办公</div>
            <div class="item">教学</div>
            <div class="item">工单</div>
            <div class="item">招生</div>
        </div>

        <script>
            const ali = document.querySelectorAll(".cut-over-tab ul li");
            const aitem = document.querySelectorAll(".cut-over-tab .cont .item");

            let defaultIndex = 2;

            ali[defaultIndex].className = "active";
            aitem[defaultIndex].style.display = "block";

            for (let i = 0; i < ali.length; i++) {
                ali[i].xuhao = i;
                ali[i].onclick = function () {
                    clearPre();
                    setCurrent.call(this);
                    defaultIndex = this.xuhao;
                }
            }

            function setCurrent() {
                this.className = "active";
                aitem[this.xuhao].style.display = "block";
            }

            function clearPre() {
                ali[defaultIndex].class = ""
                aitem[defaultIndex].style.display = "none"
            }

        </script>

    </main>

    <!-- TODO 4.点击按钮换图片-->
    <!-- TODO 5.简易万年历-->



    <!-- TODO 6.密码强度 -->
    <!-- TODO 7.最大限度的阻止用户复制网页上的文字 -->
    <!-- TODO 8.关于布局类的作业-->

</body>
<script>




</script>

</html>